<!-- 分类 -->
<template>
  <v-container class="pl-0">
    <v-dialog v-model="dialogRoot" persistent max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">新增分类</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-text-field dense label="分类名称" prepend-icon="title" v-model="subFormData.name" required></v-text-field>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false" :disabled="btnDisabled" :loading="btnLoading"><v-icon>close</v-icon>关闭</v-btn>
          <v-btn color="info" @click="addItemHandle" :disabled="btnDisabled" :loading="btnLoading"> <v-icon>done</v-icon> 提交</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-row>
      <v-col cols='12' sm='3'>
        <v-text-field
          dense
          v-model="search"
          flat
          label="搜索模块"
          solo-inverted
          hide-details
          append-outer-icon="add"
          @click:append-outer="dialogRoot = true; subFormData = { pid: 0, name: ''}"
          clearable
          ></v-text-field>
        <v-treeview
        color="warning"
        dense
        open-all
        :items="items"
        item-key="cid"
        item-disabled="disabled"
        activatable
        return-object
        :search="search"
        :filter="filter"
        @update:active="activeUpdate"
        hoverable>
        <!-- <template v-slot:prepend="{ item, open }">
        <v-icon v-if="item.children">
          {{ open ? 'folder_open' : 'folder' }}
        </v-icon>
      </template> -->
      <template v-slot:append="{ item }">
        <v-icon v-if="item.redirect ==='yes' ">link</v-icon>
      </template></v-treeview>
      </v-col>
      <v-col sm="1" class="hidden-sm-and-down px-0 mx-0"><v-divider vertical ></v-divider></v-col>
      <v-col cols='12' sm="9" md="8">
        <v-form v-if="formData.cid !== undefined && formData.cid !== 0">
          <v-row><v-text-field dense disabled label="CID" prepend-icon="list" :value="formData.cid"></v-text-field></v-row>
          <v-row>
            <v-col cols="12" sm="6">
              <v-text-field
                v-model="formData.name"
                label="分类名称"
                prepend-icon="title"
                name="name"
                v-validate="'required|max:40'"
                :error-messages="errors.collect('name')"
                data-vv-as="名称"></v-text-field>
              <v-text-field
                v-model="formData.english_name"
                label="英文名称"
                prepend-icon="language"></v-text-field>
              <v-select
                v-model="formData.status"
                label="状态"
                prepend-icon="assistant_photo"
                :items="[{ text: '正常', value: 'normal'},{text: '停用', value: 'disabled'}]"></v-select>
                <!-- <v-select
                v-model="formData.model"
                label="数据模型"
                :disabled="true"
                :items="[{ text: '普通', value: 'common'},{text: '戏剧', value: 'theater'}]"></v-select> -->
            </v-col>
            <v-col cols="12" sm="6">
              <v-textarea
                v-model="formData.intro"
                prepend-icon="how_to_vote"
                label="简介"
                placeholder="输入分类的简介信息或者戏剧的介绍信息..."
                counter
                rows="6"
                auto-grow></v-textarea>
              <v-switch
                v-model="formData.redirect"
                false-value="no"
                true-value="yes"
                color="primary"
                :label="'是否跳转链接地址：' + (formData.redirect === 'no' ? '不跳转':'跳转至如下链接')"
              ></v-switch>
              <v-text-field
                dense
                v-if="formData.redirect === 'yes'"
                prepend-icon="launch"
                label="跳转URl"
                v-model="formData.redirect_url"
                name="redirect_url"
                v-validate="{url: {require_protocol: true }, required: true}"
                :error-messages="errors.collect('redirect_url')"
                data-vv-as="跳转URL"
                ></v-text-field>
            </v-col>
            <v-col cols="12">
              <image-upload v-model="formData.images" :multiple="false"></image-upload>
            </v-col>
            <v-col cols="12">
            <!-- <v-textarea
            v-model="formData.remark"
            prepend-icon="people"
            label="备注"
            counter
            rows="2"
            auto-grow></v-textarea> -->
            <v-btn color="info" @click.stop="updateItemHandle" :disabled="btnDisabled" :loading="btnLoading"><v-icon>check</v-icon>更新</v-btn>
            <v-btn color="warning" @click.stop="deleteItemHandle" :disabled="false" :loading="btnLoading" class="mx-5"><v-icon>delete</v-icon>删除</v-btn>
            <v-dialog v-model="dialog" persistent max-width="600px">
              <template v-slot:activator="{ on }">
                <v-btn color="pink" :disabled="false" dark v-on="on" @click="subFormData = { pid: formData.cid, name: '' }"><v-icon>add</v-icon>新增子分类</v-btn>
              </template>
              <v-card>
                <v-card-title>
                  <span class="headline">新增【{{formData ? formData.name : ''}}】子分类</span>
                </v-card-title>
                <v-card-text>
                  <v-container>
                    <v-row>
                      <v-text-field dense label="分类名称" prepend-icon="title" v-model="subFormData.name" required></v-text-field>
                    </v-row>
                  </v-container>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" text @click="dialog = false" :disabled="btnDisabled" :loading="btnLoading"><v-icon>close</v-icon> 关闭</v-btn>
                  <v-btn color="info" @click="addItemHandle" :disabled="btnDisabled" :loading="btnLoading"><v-icon>done</v-icon> 提交</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            </v-col>
          </v-row>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { ImageUpload } from '@/components/Form/index.js'
import * as API from '@/api/admin/category.js'
export default {
  name: 'Category',
  components: { ImageUpload },
  data: function () {
    return {
      items: [],
      formData: { redirect: 'no' },
      subFormData: {},
      btnDisabled: false,
      btnLoading: false,
      search: '',
      dialog: false,
      dialogRoot: false
    }
  },
  created: function () {
    this.fetchData()
  },
  computed: {
    filter: function() {
      return (item, search, textKey) => {
        return item.name.indexOf(search) > -1
      }
    }
  },
  methods: {
    fetchData: function() {
      API.fetchTreeData().then(res => {
        this.items = res.data
      })
    },
    activeUpdate: function(active) {
      if (active.length >= 1) this.formData = active[0]
    },
    addItemHandle: function() {
      this.btnDisabled = true
      this.btnLoading = true
      API.createOne(this.subFormData).then(res => {
        this.$toasted.success(res.data)
        this.dialog = false
        this.dialogRoot = false
        this.fetchData()
      }).catch(err => {
        // this.$toasted.error(err.response.data)
        return Promise.reject(err)
      }).finally(() => {
        this.btnDisabled = false
        this.btnLoading = false
        // nothing to do here :)
      })
    },
    updateItemHandle: function() {
      this.$validator.validate().then(result => {
        if (result) {
          this.btnDisabled = true
          this.btnLoading = true
          API.updateOne(this.formData).then(res => {
            this.$toasted.success(res.data)
            this.fetchData()
            // this.$router.go(-1)
          }).catch(err => {
            // this.$toasted.error(err.response.data)
            return Promise.reject(err)
          }).finally(() => {
            this.btnDisabled = false
            this.btnLoading = false
          })
        } else {
          this.$toasted.error('错误的FORM类型!')
        }
      })
    },
    deleteItemHandle: function() {
      if (confirm('是否确定删除这条数据信息？删除后无法恢复，请慎重！')) {
        API.deleteOne(this.formData.cid).then(res => {
          this.$toasted.success(res.data)
          this.formData = { redirect: 'no' }
          this.fetchData()
        }).catch(err => {
          this.$toasted.error(err.response.data)
          return Promise.reject(err)
        }).finally(() => {
          // nothing to do here :)
        })
      }
    }
  }
}
</script>
